<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./vue.js"></script>
  <div id="app">
    <input type="text" v-model='uname'>
    {{uname}}
    <br>
    <br>
    <select v-model="select"> 
      <option value="">请选择城市</option>
      <option value="武汉">武汉</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
    </select>
    {{select}}
    <br>
    <input type="text v-model.number='n1'">+<input type="text v-model.number='n2'">=
    <span>{{n1+n2}}</span><br>
    <input type="text" v-model.trim='ini' @keyup.enter='index'>{{ini}}
    <button @click=show>点击我</button>
    <!-- 失去焦点更新 -->
    <input type="text" v-model.lazy='lan'>{{lan}}
  </div>
  <script>
  const vm = new Vue({
    el:'#app',
    data:{
      tips:'123',
      uname:'abc',
      select:'',
      n1:1,
      n2:2,
      ini:'',
      lan:''
    },
    methods:{
     index() {
       console.log(this.ini);
     },
     show() {
       console.log(`'用户名是：${this.ini}'`);
     }
    }
  })
  </script>
</body>
</html>